<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>人员管理</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="Thu, 19 Nov 1900 08:52:00 GMT">
        <link rel="shortcut icon" href="images/icons/favicon.ico" th:href="@{/images/icons/favicon.ico}">
        <link rel="apple-touch-icon" href="images/icons/favicon.png" th:href="@{/images/icons/favicon.png}">
        <link rel="apple-touch-icon" sizes="72x72" href="images/icons/favicon-72x72.png" th:href="@{/images/icons/favicon-72x72.png}">
        <link rel="apple-touch-icon" sizes="114x114" href="images/icons/favicon-114x114.png" th:href="@{/images/icons/favicon-114x114.png}">
        <!--Loading bootstrap css-->
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700">
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" th:href="@{/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/font-awesome/css/font-awesome.min.css" th:href="@{/vendors/font-awesome/css/font-awesome.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap/css/bootstrap.min.css" th:href="@{/vendors/bootstrap/css/bootstrap.min.css}">
        <!--LOADING STYLESHEET FOR PAGE-->
        <link type="text/css" rel="stylesheet" href="../static/vendors/intro.js/introjs.css" th:href="@{/vendors/intro.js/introjs.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/calendar/zabuto_calendar.min.css" th:href="@{/vendors/calendar/zabuto_calendar.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/sco.message/sco.message.css" th:href="@{/vendors/sco.message/sco.message.css}">
        <!--Loading style vendors-->
        <link type="text/css" rel="stylesheet" href="../static/vendors/animate.css/animate.css" th:href="@{/vendors/animate.css/animate.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-pace/pace.css" th:href="@{/vendors/jquery-pace/pace.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/iCheck/skins/all.css" th:href="@{/vendors/iCheck/skins/all.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-notific8/jquery.notific8.min.css" th:href="@{/vendors/jquery-notific8/jquery.notific8.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css" th:href="@{/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css}">
        <!--Loading style-->
        <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" class="default-style" th:href="@{/css/themes/style1/orange-blue.css}">
        <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" id="theme-change" class="style-change color-change" th:href="@{/css/themes/style1/orange-blue.css}">
        <!--  <link type="text/css" rel="stylesheet" href="css/style-responsive.css">-->
        <!--新增加的css样式-->
        <link type="text/css" rel="stylesheet" href="../static/css/addcss.css" th:href="@{/css/addcss.css}">
        <script src="/static/js/lrz/lrz.bundle.js" th:src="@{/js/lrz/lrz.bundle.js}"></script>
        <script src="/static/js/jquery-2.1.1.min.js" th:src="@{/js/jquery-2.1.1.min.js}"></script>

        <!--表单验证-->
        <script src="/static/js/validate/jquery.validate.js" th:src="@{/js/validate/jquery.validate.js}"></script>
        <!--<script src="/static/js/validate/jquery.form.js" th:src="@{/js/validate/jquery.form.js}"></script>-->



        <style>

            .dialog{
                width:360px;border:solid 5px #666;position:absolute;display:none;z-index:101}
            .dialog .title{background-color:#33485C;padding:10px;color:#fff;font-weight:bold}
            .dialog .title img{float:right;margin-top: -8px;margin-right: -10px}
            .dialog .content{background-color:#fff;padding:25px;height:80px}
            .dialog .content img{float:left}
            .dialog .content span{float:left;padding-top:10px;padding-left:10px}
            .dialog .bottom{text-align:right;padding:10px 10px 10px 0px;background-color:#eee}
            .mask {width:100%;height:100%; background-color:rgba(0,0,0,0.4);position:absolute;
                top:0px;left:0px;display:none;z-index:100}
            /*模态框样式*/
           /* .modal-footer{ width: 450px;}
            .modal-content{width: 450px;}
            .modal-body{width: 650px;}*/
        </style>

    </head>
    <body class=" ">
        <div>
            <!--BEGIN BACK TO TOP-->
            <a id="totop" href="#"><i class="fa fa-angle-up"></i></a>
            <!-- 引用头部 -->
            <div th:replace="common/top::topFragment"></div>
            <!--END TOPBAR-->
            <div id="wrapper">
                <!-- 引用左菜单导航栏 -->
                <div th:replace="common/leftToolBar::leftToolbar"></div>
                <!--END CHAT FORM-->
                <!--BEGIN PAGE WRAPPER-->
                <div id="page-wrapper">
                    <!-- 引用工具条 -->
                    <div th:replace="common/toolBar::toolBar"></div>
                    <!--右侧区内容的编写 -->
                    <div class="page-content">

                        <div class="" style="margin-bottom: 15px;text-align: center">
                            <!-- 查询 --><!--action="/roomType/toRoomType?pageNum=1"-->
                            <form id="myForm" class="form-inline"  th:action="@{/employee/toEmployee(pageNum=1)}" method="post">
                                <button type="button" class="btn btn-info btn_addRoomType"  th:value="添加员工" onclick="openModal()">添加员工</button>
                                <div class="form-group">
                                    <label class="control-label">员工名称：</label>
                                    <input  class="form-control" id="username" name="username" th:value="${employee.username}"
                                           placeholder="请输入操作员名称"/>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">员工权限：</label>
                                    <select id="roleId" th:name="role.roleId" th:value="${employee.role.roleId}" class="form-control input-sm">
                                        <option value="">--请选择--</option>
                                        <option th:selected="${employee.role.roleId eq role.roleId}" th:each="role:${roles}" th:value="${role.roleId}" th:text="${role.roleName}"></option>

                                    </select>

                                </div>
                                <button type="submit" class="btn btn btn-success">查询</button>
                                <button type="button" class="btn btn btn-warning">重置</button>
                            </form>
                            <script type="text/javascript">
                                $(function () {
                                    /**
                                     * 重置表单信息
                                     */
                                    $(".btn-warning").click(function () {
                                        location.href="/employee/toEmployee?pageNum=1";
                                    })

                                });
                            </script>
                            <!-- 表格 -->
                            <table class="table table-bordered" style="margin-top: 20px">
                                <tr id="thtr">
                                    <th>序号</th>
                                    <th>用户名</th>
                                    <th>性别</th>
                                    <th>员工真实姓名</th>
                                    <th>手机号</th>
                                    <th>员工角色</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                <tr th:each="emp,itEmp : ${pageInfo.getList()}">
                                    <td th:text="${itEmp.count}"></td>
                                    <td th:text="${emp.username}"></td>
                                    <td th:text="${emp.sex}"></td>
                                    <td th:text="${emp.realName}"></td>
                                    <td th:text="${emp.phone}"></td>
                                    <td th:text="${emp.role.roleName}"></td>
                                    <td th:if="${emp.status == 1}">可用</td>
                                    <td th:if="${emp.status == 0}">禁用</td>
                                    <td>
                                        <button type="button" class="btn btn-default btn-xs active btn_update">修改</button>
                                        <button type="button" class="btn btn-xs btn-primary active deleteBtn">删除</button>
                                    </td>
                                </tr>
                            </table>


                        <!-- 功能操作内容 -->
                    </div>
                        <div>
                            <ul class="pager">
                                <li>
                                    <a th:href="@{/employee/toEmployee(pageNum=1,username=${employee.username},roleId=${employee.role.roleId})}" >首页</a>
                                </li>
                                <li>
                                    <a th:href="@{/employee/toEmployee(pageNum=${pageInfo.isHasPreviousPage()}?${pageInfo.getPrePage()}:1,username=${employee.username},roleId=${employee.role.roleId})}">&laquo;</a>
                                </li>
                                <li>第 [[${pageInfo.pageNum}]] 页</li>
                                <li>
                                    <a th:href="@{/employee/toEmployee(pageNum=${pageInfo.isHasNextPage()}?${pageInfo.getNextPage()}:${pageInfo.pages},username=${employee.username},roleId=${employee.role.roleId})}">&raquo;</a>
                                </li>
                                <li>
                                    <a th:href="@{/employee/toEmployee(pageNum=${pageInfo.pages},username=${employee.username},roleId=${employee.role.roleId})}">尾页</a>
                                </li>
                                <li>&nbsp;&nbsp;&nbsp;总页数 [[${pageInfo.pages}]] 页</li>
                                <li>&nbsp;&nbsp;&nbsp;总记录数 [[${pageInfo.total}]] 条</li>
                            </ul>
                        </div>

                    <!--END CONTENT-->
                </div>


                    </div>
                <!--上传图片的css-->
                <style>
                    #prompt3{
                        border: 1px dashed black;
                        margin-left: 50px;
                        height: 100px;
                        width: 100px;
                        position: relative;
                    }
                    #prompt3 input{
                        width:100px;
                        height: 100px;
                        position: absolute;left: 0;
                        top: 0;opacity: 0;
                        cursor: pointer;
                        z-index: 2;
                    }
                    #prompt3 img{
                        position: absolute;left: 0;
                        top:0;z-index: 1;
                        width:100%;
                        height: 100%;
                    }
                    .radio_add{
                        padding-left: 20px;
                    }
                    /*错误验证信息*/
                    em{
                        display: inline-block;
                    }
                    #form1 em.error{
                        font-style:normal;
                        color:#c00; font-size:16px;
                        margin-left:10px;
                        background:url(/images/empValidate/error.png) no-repeat left center;
                        padding-left:30px; background-size:20px;
                        margin-top: 5px;}
                    #form1 em.valid{
                        background-image:url(/images/empValidate/ok.png);
                        color:#090}
                </style>
                <!--模态框内容-->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="closeWindow()">×
                                </button>
                                <h4 class="modal-title" id="myModalLabel"> 添加员工信息 </h4>
                            </div>
                            <div class="modal-body">
                                <form  id="form1" class="form-horizontal" method="post">

                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">头像：</label>
                                        <div id="prompt3" class="col-sm-5">
                                            <input type="file" id="u_headImage" name="headImage" onchange="changepic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">
                                            <img id="img3"  th:src="@{/static/upload/empImgs/empImage.png}" alt="上传图片" title="图片上传">
                                        </div>
                                    </div>
                                    <div id="addImgHidden"></div>

                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">性别：</label>
                                        <div class="col-sm-5">
                                            <!--<input type="text" class="form-control" id="u_sex" name="sex" th:value="${employee.sex}">-->
                                            <label class="radio-inline radio_add">
                                                <input type="radio" name="sex" value="男" checked> 男
                                            </label>
                                            <label class="radio-inline radio_add">
                                                <input type="radio" name="sex"  value="女"> 女
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">员工名称：</label>
                                        <div class="col-sm-5">
                                            <input type="text" class="form-control" id="u_username" name="username">
                                        </div>

                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">密码：</label>
                                        <div class="col-sm-5">
                                            <input type="password" class="form-control" id="u_password" name="password">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">重新输入密码：</label>
                                        <div class="col-sm-5">
                                            <input type="password" class="form-control" id="repassword" name="repassword">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">员工真实姓名：</label>
                                        <div class="col-sm-5">
                                            <input type="text" class="form-control" id="u_realName" name="realName" th:value="${employee.realName}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">手机号：</label>
                                        <div class="col-sm-5">
                                            <input type="text" class="form-control" id="u_phone" name="phone" th:value="${employee.phone}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">员工角色：</label>
                                        <div class="col-sm-5">
                                            <!--<input type="text" class="form-control" id="u_" name="sex" th:value="${employee.sex}">-->
                                            <select id="u_roleId" th:name="roleId"  class="form-control input-sm">
                                                <option value="">--请选择--</option>
                                                <option  th:each="role:${roles}" th:value="${role.roleId}" th:text="${role.roleName}"></option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">状态：</label>
                                        <div class="col-sm-5">
                                            <!--<input type="text" class="form-control" id="u_sex" name="sex" th:value="${employee.sex}">-->
                                            <select id="u_status"  th:name="status" class="form-control input-sm">
                                                <option value="">--请选择--</option>
                                                <option th:selected="${status eq 0}"  value="0">禁用</option>
                                                <option th:selected="${status eq 1}"   value="1">可用</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="reset" id="reset" class="btn btn-default">
                                            重置
                                        </button>
                                        <button type="submit" class="btn btn-success submit btn_add_update">
                                            添加
                                        </button>
                                    </div>
                                </form>

                            </div>

                        </div>
                    </div> <!--/.modal-dialog&ndash-->
                </div> <!--/.modal&ndash-->

                <script type="text/javascript">

                //validate表单验证
                var  validator = $("#form1").validate({
                    errorElement:"em",
                    success:function(label){
                        label.html("OK").addClass("valid");
                    },
                    errorPlacement: function(error, element) {
                        //error.appendTo(element.parent());
                        element.parent().parent().append(error);

                    },
                    rules:{
                        username:{
                            required:true,
                            minlength:2,
                            maxlength:10,
                            pwdValidate:true,
                            remote: {
                                url: "/employee/getValidateName",     //后台处理程序
                                type: "post",               //数据发送方式
                                dataType: "json",           //接受数据格式
                                data: {                     //要传递的数据
                                    username: function() {
                                        return $("#u_username").val();
                                    }
                                }
                            }
                        },
                        password:{
                            required:true,
                            minlength:6,
                            maxlength:16,

                        },
                        repassword:{
                            required:true,
                            equalTo:"#u_password"
                        },
                        realName:{
                            required:true,
                            minlength:2,
                            maxlength:10,
                        },
                        phone:{
                            required:true,
                            phoneValid:true
                        },
                        roleId:{
                            required:true
                        },
                        status:{
                            required:true
                        }

                    },
                    messages:{
                        username:{
                            required:"用户名不能为空",
                            minlength:"用户名长度不能小于2",
                            maxlength:"用户名长度不能大于10",
                            pwdValidate:"字母和数字，数字不能开头",
                            remote:"用户名已经存在"
                        },
                        password:{
                            required:"密码不能为空",
                            minlength:"密码长度不能小于6",
                            maxlength:"密码长度不能大于16",
                        },
                        repassword:{
                            required:"请再次输入密码",
                            equalTo:"两次密码不一致"
                        },
                        realName:{
                            required:"真实姓名不能为空",
                            minlength:"真实姓名不能小于2",
                            maxlength:"真实姓名不能大于10",
                        },
                        phone:{
                            required:"手机号不能为空",
                            phoneValid:"手机号码格式不正确"
                        },
                        roleId:{
                            required:"请选择员工角色"
                        },
                        status:{
                            required:"请选择员工状态"
                        }
                    },
                    submitHandler: function(form) { //通过之后回调函数

                    console.log($("#u_headImage").val());
                        var filepath = $("#u_headImage").val();

                        if (filepath != null && filepath != ""){
                            var extStart=filepath.lastIndexOf(".");
                            var ext=filepath.substring(extStart,filepath.length).toUpperCase();
                            if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){
                                alert("图片限于bmp,png,gif,jpeg,jpg格式");
                                return;
                            }
                        }

                        //这里使用ajax提交数据
                        add_update();

                    }
                })
                jQuery.validator.addMethod("pwdValidate", function(value, element) {

                    var cer = /^[a-zA-Z]\w{1,}$/;
                    return this.optional(element) || (cer.test(value));
                });
                jQuery.validator.addMethod("phoneValid", function(value, element) {
                    var qq = /^1(3|4|5|7|8)\d{9}$/;
                    return this.optional(element) || (qq.test(value));
                });
                $("#reset").click(function() {
                    validator.resetForm();

                });
               /* //Form 表单用 Ajax 提交数据并用 jQuery Validate 验证
                $.validator.setDefaults({
                    submitHandler: function() {
                        alert("此处可执行提交数据 Ajax!");
                        //添加或者修改
                        add_update();
                    }
                });*/
                    //传图片
                    function changepic(fileElm) {
                        lrz(fileElm.files[0]).then(function(resultObj){
                            console.log(resultObj.base64);
                            document.getElementById('img3').src = resultObj.base64;
                            $("#addImgHidden").empty();
                            $("#addImgHidden").append("<input type='hidden' name='imgBase64' value='"+ resultObj.base64 +"'/>");
                        });
                    }
                    /*打开模态框*/
                    function openModal() {
                        $("#myModal").modal("show");
                    }

                    //点击添加 或者 修改
                    function add_update() {
                        var data = $("#form1").serialize()+"&role.roleId="+$("#u_roleId").val();
                        var btnValue = $(".btn_add_update").html().trim();
                        console.log(btnValue);
                        var url = "/employee/updateEmpByEmp";
                        var shuchu = "修改";
                        //获取按钮的值判断使用某个值
                        if (btnValue == "添加"){
                            url = "/employee/addEmpByEmp";
                            shuchu = "添加"
                        }
                        ajax_add_update(url,data,shuchu);
                        if (btnValue == "修改"){

                            closeWindow();
                        }
                    }




                        /**
                         * 添加或者修改通用的ajax
                         * @param url
                         * @param data
                         * @param shuchu
                         */
                        function ajax_add_update(url,data,shuchu){
                            $.ajax({
                                //几个参数需要注意一下
                                type: "POST",//方法类型
                                dataType: "json",//预期服务器返回的数据类型
                                url: url ,//url
                                data: data,
                                success: function (result) {
                                    console.log(result);//打印服务端返回的数据(调试用)
                                    if (result.success) {
                                        alert(shuchu+"成功");
                                        resultInfo();
                                    }else{
                                        alert(shuchu+"失败");
                                    };
                                },
                                error : function() {
                                    alert("异常！");
                                }
                            });
                        }

                        /**
                         * 通过username获取员工信息
                         * @param empName
                         * @returns {*}
                         */
                        function ajax_getEmpInfoByName(empName){
                            var url = "/employee/selectEmpByName";
                            var params = "username="+empName;
                            var check_res;
                            $.ajax({
                                async:false,
                                url: url,
                                data:params,
                                type: "POST",
                                dataType: "json",
                                success: function(result){
                                    check_res=result;
                                },error:function(){}
                            });
                            return check_res;
                        }

                        /**
                         * 修改前，将数据绑定到表单中
                         */
                        function bingDingEmpInfo(btn) {
                            var empName = $(btn).parent().siblings().eq(1).html();
                            //alert("修改的名称："+empName);
                            var emp = ajax_getEmpInfoByName(empName);
                            console.log(emp);
                            $("#u_username").val(emp.username).attr("readOnly","true");
                            $("#u_password").val(emp.password);
                            $("#repassword").val(emp.password);
                            $("#img3").prop("src","/static/upload/empImgs/"+emp.headImage);
                            //绑定性别
                            $("input:radio[name='sex'][value="+emp.sex+"]").attr('checked','true');
                            //$("input:radio[value='xingbie']").attr('checked','true');
                            $("#u_realName").val(emp.realName);
                            $("#u_phone").val(emp.phone);
                            $("#u_roleId").val(emp.role.roleId);
                            $("#u_status").val(emp.status);
                        }
                        //点击修改按钮
                        $(".btn_update").click(function () {
                            $("#u_username").rules("remove");
                            bingDingEmpInfo(this);
                            $(".btn_add_update").html("修改");
                            $("#u_username").attr("readOnly",true);
                            $(".modal-title").html("修改员工信息")

                            //打开模态框
                            openModal();
                        })




                    //重置信息
                    function resultInfo() {
                        $("#u_username").val("").attr("readOnly","true");
                        $("#u_password").val("");
                        $("#repassword").val("");
                        $("#img3").prop("src","\\upload\\empImgs\\empImage.png");
                        //绑定性别
                        $("input:radio[name='sex'][value='男']").attr('checked','true');
                        //$("input:radio[value='xingbie']").attr('checked','true');
                        $("#u_realName").val("");
                        $("#u_phone").val("");
                        $("#u_roleId").val("");
                        $("#u_status").val("");
                        //重置表单验证
                        validator.resetForm();


                        }
                    function closeWindow() {
                        resultInfo();
                        $(".btn_update_add").html("添加");
                        $(".modal-title").html("添加员工信息");
                        $("#u_username").prop("readOnly","false");
                        location.href="/employee/toEmployee?pageNum=1";

                    }

                </script>


                <!--弹窗内容开始-->
                <div class="mask"></div>
                <div class="dialog">
                    <div class="title">
                        <img src="/images/room/roomTanC/close.png" alt="点击可以关闭" />删除时提示
                    </div>
                    <div class="content">
                    </div>
                    <div class="bottom">
                        <input id="Button2" type="button" value="确定" class="btn2"/>&nbsp;&nbsp;
                        <input id="Button3" type="button" value="取消" class="btn3"/>
                    </div>
                </div> <!--弹窗内容结束-->

                <script type="text/javascript">
                    $(function() {
                        //要删除的值
                        var empName=null;
                        $(".deleteBtn").click(function() { //注册删除按钮点击事件
                            empName = $(this).parent().siblings().eq(1).html();
                            appendContent(empName);
                            $(".mask").show(); //显示背景色
                            showDialog(); //设置提示对话框的Top与Left
                            $(".dialog").show(); //显示提示对话框
                        })
                        //拼接content的内容
                        function appendContent(empName) {
                            $(".content").empty();
                            var html = "<img src='/images/room/roomTanC/delete.png' alt=\"\"/>"
                            html += "您确定要删除员工:"
                            html += "<font color='red' style='font-weight: bold'>";
                            html += empName;
                            html += "</font>这条记录吗？"
                            $(".content").append(html);
                        }
                        /*
                        *根据当前页面与滚动条位置，设置提示对话框的Top与Left
                        */
                        function showDialog() {
                            var objW = $(window); //当前窗口
                            var objC = $(".dialog"); //对话框
                            var brsW = objW.width();
                            var brsH = objW.height();
                            var sclL = objW.scrollLeft();
                            var sclT = objW.scrollTop();
                            var curW = objC.width();
                            var curH = objC.height();
                            //计算对话框居中时的左边距
                            var left = sclL + (brsW - curW) / 2;
                            //计算对话框居中时的上边距
                            var top = sclT + (brsH - curH) / 2;
                            //设置对话框在页面中的位置
                            objC.css({ "left": left, "top": top });
                        }

                        $(window).resize(function() {//页面窗口大小改变事件
                            if (!$(".dialog").is(":visible")) {
                                return;
                            }
                            showDialog(); //设置提示对话框的Top与Left
                        });

                        $(".title img").click(function() { //关闭图片点击事件
                            $(".dialog").hide();
                            $(".mask").hide();
                        })

                        $("#Button3").click(function() {//取消按钮点击事件
                            $(".dialog").hide();
                            $(".mask").hide();
                        })

                        $("#Button2").click(function() {//确定按钮点击事件
                            $(".dialog").hide();
                            $(".mask").hide();

                            ajax_deleteEmpByempName(empName);//删除数据
                        })

                    })

                    //在这里执行删除命令
                    function ajax_deleteEmpByempName(empName) {
                        var url = "/employee/deleteEmpByName";
                        var params = "empName="+empName;

                        $.ajax({
                            async:false,
                            url: url,
                            data:params,
                            type: "POST",
                            dataType: "json",
                            success: function(result){
                                //console.log(result.success);
                                if (result.success){
                                    alert("删除成功！");
                                    var message = $("#myForm").serialize()
                                    location.href="/employee/toEmployee?pageNum=1&"+message;
                                } else {
                                    alert("删除失败！");
                                }
                            },error:function(){}
                        });

                    }
                </script>

                <!-- 引用底部 -->
                <div th:replace="common/bottom::bottom"></div>
                <!--END FOOTER-->
                <!--END PAGE WRAPPER-->

        </div>
        <script>
            $(function () {
                $("#breadAppend").append('<i class="fa fa-home"></i><a href="#">系统管理</a> <i class="fa fa-angle-right"></i> <a href="#">人员管理</a>');
                $("#SystemManage").addClass("active");
            })
        </script>
      </div>
        <!-- 引用脚本 -->
        <div th:replace="common/script::script">

        </div>

    </body>
</html>
